// ng-resize 样式 - 完全模仿浏览器原生样式

.ng-resizable {
  position: relative;
  box-sizing: border-box;
}

.ng-resize-handle {
  position: absolute;
  z-index: 10;
  user-select: none;
  width: 14px;
  height: 14px;

  // 横向模式 - 三条竖线
  &.ng-resize-handle-horizontal {
    cursor: ew-resize;
    height: 100%;
    width: 8px;
    background-image:
      linear-gradient(to bottom, #313131 0%, #313131 100%),
      linear-gradient(to bottom, #313131 0%, #313131 100%),
      linear-gradient(to bottom, #313131 0%, #313131 100%);
    background-size: 1px 20px, 1px 20px, 1px 20px;
    background-position: 2px center, 4px center, 6px center;
    background-repeat: no-repeat;
  }

  // 纵向模式 - 三条横线
  &.ng-resize-handle-vertical {
    cursor: ns-resize;
    width: 100%;
    height: 8px;
    background-image:
      linear-gradient(to right, #313131 0%, #313131 100%),
      linear-gradient(to right, #313131 0%, #313131 100%),
      linear-gradient(to right, #313131 0%, #313131 100%);
    background-size: 20px 1px, 20px 1px, 20px 1px;
    background-position: center 2px, center 4px, center 6px;
    background-repeat: no-repeat;
  }
}

// 拖拽中状态
.ng-resizing {
  user-select: none;
}

// 135度斜线 (右下、左上)
.ng-resize-handle-right-bottom,
.ng-resize-handle-left-top {
  cursor: nwse-resize;
  background-image:
    linear-gradient(135deg, transparent 6px, #313131 6px, #313131 7px, transparent 7px),
    linear-gradient(135deg, transparent 10px, #313131 10px, #313131 11px, transparent 11px),
    linear-gradient(135deg, transparent 14px, #313131 14px, #313131 15px, transparent 15px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

// -135度斜线 (右上、左下)
.ng-resize-handle-right-top,
.ng-resize-handle-left-bottom {
  cursor: nesw-resize;
  background-image:
    linear-gradient(-135deg, transparent 6px, #313131 6px, #313131 7px, transparent 7px),
    linear-gradient(-135deg, transparent 10px, #313131 10px, #313131 11px, transparent 11px),
    linear-gradient(-135deg, transparent 14px, #313131 14px, #313131 15px, transparent 15px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

// 右下角
.ng-resize-handle-right-bottom {
  right: 1px;
  bottom: 1px;

  &.ng-resize-handle-horizontal { right: 0; }
  &.ng-resize-handle-vertical { bottom: 0; }
}

// 左上角
.ng-resize-handle-left-top {
  left: 1px;
  top: 1px;

  &.ng-resize-handle-horizontal { left: 0; }
  &.ng-resize-handle-vertical { top: 0; }
}

// 右上角
.ng-resize-handle-right-top {
  right: 1px;
  top: 1px;

  &.ng-resize-handle-horizontal { right: 0; }
  &.ng-resize-handle-vertical { top: 0; }
}

// 左下角
.ng-resize-handle-left-bottom {
  left: 1px;
  bottom: 1px;

  &.ng-resize-handle-horizontal { left: 0; }
  &.ng-resize-handle-vertical { bottom: 0; }
}
